<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Viewpoint</title>
    <script src="layui/echarts-all.min.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .chart-container {
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>
<body>
<div class="chart-container" id="leftChart"></div>
<div class="chart-container" id="rightChart"></div>
<script src="layui/layui.all.js"></script>
<script>
    const $=layui.$;
    $(document).ready(function() {
        // AJAX 请求数据
        $.ajax({
            url: 'category/chart1', // 左边图表数据的 API 地址
            success: function(leftData) {
                var formattedLeftData = leftData.map(function(item) {
                    return {
                        name: item.name,
                        value: item.count
                    };
                });
                // 左边图表
                var leftChartDom = document.getElementById('leftChart');
                var leftChart = echarts.init(leftChartDom);
                var leftOption = {
                    title: {
                        text: '各品类上架商品数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: 'Radius Mode',
                            type: 'pie',
                            radius: [20, 140],
                            center: ['50%', '50%'],
                            roseType: 'radius',
                            itemStyle: {
                                borderRadius: 5
                            },
                            data: formattedLeftData // 使用 AJAX 请求的数据
                        }
                    ]
                };
                leftChart.setOption(leftOption);
            }
        });

        $.ajax({
            url: 'category/chart2', // 右边图表数据的 API 地址
            success: function(rightData) {
                console.log(rightData);
                var formattedRightData = rightData.map(function(item) {
                    return {
                        name: item.name,
                        value: item.salesvolume
                    };
                });
                // 右边图表
                var rightChartDom = document.getElementById('rightChart');
                var rightChart = echarts.init(rightChartDom);
                var rightOption = {
                    title: {
                        text: '各品类销售额',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: 'Area Mode',
                            type: 'pie',
                            radius: [20, 140],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 5
                            },
                            data: formattedRightData // 使用 AJAX 请求的数据
                        }
                    ]
                };
                rightChart.setOption(rightOption);
            }
        });
    });
</script>
</body>
</html>